
var pageItem = new Object();

function selectContent(key) {
    $(".left-nav-nemu li").attr("class", "");
    $(".page-content-div").hide();
    pageItem[key].menu.attr("class", "active");
    pageItem[key].frame.show();
}



function bindMenuClick() {
    $(".content-page-item").click(function() {
	var $t = $(this);
	if (pageItem[$t.attr("uName")] == undefined) {
	    $(".page-content-div").hide();
	    $(".left-nav-nemu li").attr("class", "");
	    $(".left-nav-nemu").append("<li role='presentation' id='" + $t.attr("uName") + "_menu' class='active'><a >" + $t.html() + "</a></li>");
	    var pageMenu = $("#" + $t.attr("uName") + "_menu");
	    $(".page-content").append("<div  id='" + $t.attr("uName") + "_frame'' class='page-content-div'><span class='glyphicon glyphicon-remove text-right' aria-hidden='true'></span><iframe src='" + $t.attr("url") + "'  class='page-content-iframe'></iframe></div>");
	    var pageFrame = $("#" + $t.attr("uName") + "_frame");
	    pageItem[$t.attr("uName")] = {
		"menu" : pageMenu,
		"frame" : pageFrame
	    };
	    pageMenu.click(function() {
		var uname = $(this).attr("id").split('_')[0];
		selectContent(uname);
	    });
	    
	    
	    pageFrame.find(".glyphicon-remove").click(function(){
		//remove
		var key=$(this).parent().attr("id").split('_')[0];
		pageItem[key].menu.remove();
		pageItem[key].frame.remove();		
		delete pageItem[key];
		
	    });
	    
	} else {
	    selectContent($t.attr("uName"));
	}
    });
}

function HomeBind()
{
    
 }



// main function
$(function() {
    bindMenuClick();
});



